<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Social Life System</title>
</head>

<body>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="course_management.html">Course Management</a></li>
            <li><a href="library_management.html">Library Management</a></li>
            <li><a href="data_display.html">Data Display</a></li>
        </ul>
    </nav>
    <div class="container">
        <h1>Social Life System</h1>
        
        <div class="box">
            <h2>Student Selection</h2>
            <label for="studentName">Student Name:</label>
            <input type="text" id="studentName" placeholder="Enter student name (default: Alice)">
        </div>
        
        <div class="box">
            <h2>Add Student</h2>
            <label for="newStudentName">Name:</label>
            <input type="text" id="newStudentName" placeholder="Enter student name">
            <button id="addNewStudent">Add Student</button>
            <div class="feedback-window" id="addStudentFeedback"></div>
        </div>
        
        <div class="box">
            <h2>Display Friends</h2>
            <button id="showFriends">Show Friends</button>
            <div class="feedback-window" id="showFriendsFeedback"></div>
        </div>
        
        <div class="box">
            <h2>Add Friends</h2>
            <input type="text" id="newFriend" placeholder="Enter friend's name">
            <button id="addNewFriend">Add Friend</button>
            <div class="feedback-window" id="addFriendFeedback"></div>
        </div>
        
        <div class="box">
            <h2>Filter Connections</h2>
            <input type="text" id="filterCriteria" placeholder="Interest (e.g. badminton)">
            <button id="filterConnections">Filter</button>
            <div class="feedback-window" id="filterFeedback"></div>
        </div>
        
        <div class="box">
            <h2>Create Community</h2>
            <input type="text" id="communityName" placeholder="Community name">
            <button id="createCommunity">Create</button>
            <div class="feedback-window" id="communityFeedback"></div>
        </div>
        
        <div class="box">
            <h2>Join Community</h2>
            <input type="text" id="communityName" placeholder="Community name to join">
            <button id="joinCommunity">Join</button>
            <div class="feedback-window" id="communityFeedback"></div>
        </div>
        
        <div class="box">
            <h2>Find Bridges</h2>
            <button id="findBridges">Find Bridges</button>
            <div class="feedback-window" id="bridgesFeedback"></div>
        </div>
    </div>
    <script src="social.js"></script>
</body>

</html>